<template>
    <div>
        <van-nav-bar title="订单信息" left-text="返回" left-arrow @click-left="proxy.$leftClick()" />
        <div v-if="store.dingdanData.length > 0" class="order-list">
            <div class="order-item" v-for="(item, index) in store.dingdanData" :key="index"
                @click="gotowhere('/dingdan/xiangqing/' + item.time)">
                <div class="address">
                    <van-contact-card type="edit" :name="item.children[0].name"
                        :tel="item.children[0].tel + ' (' + item.children[0].province + item.children[0].city + item.children[0].county + item.children[0].addressDetail + ')'"
                        :editable="false" />
                    <div class="time">
                        购买时间: {{ dateFormatInit(Number(item.time) ) }}
                    </div>
                    <van-card v-for="(v, i) in item.children" :key="i" :origin-price="v.originprice"
                        :price="((v.originprice * v.discount) / 10).toFixed(2)"  :title="v.proname"
                        class="goods-card" :thumb="v.img1">
                        <template #tags>
                            <van-tag plain type="primary">标签</van-tag>
                        </template>
                        <template #footer>
                            <span>小计 : {{ ((v.originprice * v.discount) / 10 * v.num).toFixed(2) }}</span>
                        </template>
                    </van-card>

                    <div class="time cred">
                        总计: {{ item.children.reduce((prev, v) => { return prev + (v.originprice * v.discount) / 10 * v.num }, 0) }}
                    </div>
                </div>
            </div>
        </div>
        <div class="empty" v-else>
            <van-empty description="暂无订单数据" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, ref, onBeforeMount } from 'vue';
import { useDingdan } from '@/store/dingdan';
import { getDingdan } from '@/api/dingdan';
import { storeToRefs } from 'pinia';
import { useRouter } from 'vue-router';
import moment from 'moment'
const router = useRouter()
const { proxy }: any = getCurrentInstance();
const store = useDingdan();
getDingdan(localStorage.getItem("userId") as string)

onBeforeMount(() => {
    store.fetchGet()
})

const dateFormatInit = (time:number,type='YYYY-MM-DD HH:mm:ss')=>{
        return moment(time).format(type);
    }
const gotowhere = (url:string)=>{
        router.push(url)
    }
</script>



<style lang="scss" scoped>
.order-list{
    padding:15px;
    .order-item{
        margin-top:15px;
        background: #ddd;
        border-radius: 10px;
        padding:10px;
        .time{
            color:#666;
            margin:10px 0 ;
            font-size: 14px;
        }

        .goods-card{
            border-radius: 10px;
        }

        .cred{
            color:#f50;
        }
    }
}
</style>